<template>
    <div class="table-box">
        <div class="table-search">
            <el-form :inline="true" :model="form">
                <el-form-item>
                    <el-input clearable v-model="form.bill_no" placeholder="账单流水号"/>
                </el-form-item>
                <el-form-item>
                    <el-input clearable v-model="form.merchant_id" placeholder="商户ID"/>
                </el-form-item>
                <el-form-item>
                    <el-input clearable placeholder="商户名称" v-model="form.merchant_name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select clearable v-model="form.coin_name" placeholder="币种名称" style="width:120px;">
                        <el-option
                            v-for="item in coinsList"
                            :key="item.coin_name"
                            :label="item.coin_name"
                            :value="item.coin_name"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select clearable v-model="form.trade_type" placeholder="交易类型">
                        <el-option
                            v-for="item in tradesList"
                            :key="item.trade_type"
                            :label="item.trade_name"
                            :value="item.trade_type"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核结果">
                    <el-select clearable v-model="form.audit_status">
                        <el-option
                            v-for="item in auditStatus"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker clearable
                        v-model="form.timeData"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="截止日期" :default-time="pickerDefaultTime"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onQuery">查询</el-button>
                    <!--<el-button type="primary" plain @click="onExport">导出</el-button>-->
                </el-form-item>
            </el-form>
        </div>
        <div class="card content-box">
            <div class="table">
                <el-table :data="tableData" border v-loading="loading">
                    <el-table-column prop="audit_order_id" label="ID" align="center" width="60" />
                        <el-table-column label="当前审核信息" align="left" width="200">
                        <template #default="scope">
                            <p>审核步骤：第 {{ scope.row.audit_level }} 审
                            <el-button type="primary" size="small" @click="handleOperate(scope.$index, scope.row, 'view')">查看</el-button>
                            </p>
                            <p>审 核 组：{{ scope.row.group_name }}</p>
                            <p v-if="scope.row.audit_status == 1">审核人员：{{ scope.row.audit_user }}</p>
                            <p>审核状态：<el-tag
                            :type="scope.row.audit_status == 1 ? 'success' : scope.row.audit_status == 2 ? 'danger' : 'warning'">
                            {{ scope.row.audit_status_name }}
                            </el-tag></p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createtime" label="提币时间" :formatter="formatterTime" align="center"  width="85" ></el-table-column>
                    <el-table-column prop="merchant_id" label="商户ID" align="center"/>
                    <el-table-column prop="merchant_name" label="商户名称" align="center" />
                    <el-table-column prop="bill_no" label="账单流水号" align="center" width="180"/>
                    <el-table-column prop="trade_type" label="交易类型" align="center"/>
                    <el-table-column prop="coin_name" label="币种名称" align="center"/>
                    <el-table-column prop="amount" label="数量" align="center"/>
                    <el-table-column label="费用" align="center">
                        <template #default="scope">
                            {{ scope.row.fee }} {{ scope.row.fee_unit }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="from_merchant_id" label="发送人" align="center"/>
                    <el-table-column prop="from_address" label="发送地址" align="center" />
                    <el-table-column prop="to_uid" label="接收人" align="center" />
                    <el-table-column prop="to_address" label="接收地址" align="center" width="200" />
                    <el-table-column prop="chain_name" label="主链名称" align="center"/>
                    <!--<el-table-column prop="to_memo" label="接收memo" align="center"/>-->
                    <el-table-column prop="audit_status" label="审核状态" align="center">
                        <template #default="scope">
                            <el-tag
                                :type="scope.row.audit_status == 1 ? 'success' : scope.row.audit_status == 2 ? 'danger' : 'warning'">
                                {{
                                    scope.row.audit_status == 1 ? "已审核" : scope.row.audit_status == 2 ? "审核失败" : "待审核"
                                }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="auditor" label="审核人" align="center"/>
                    <el-table-column prop="audit_time" label="审核时间" align="center" :formatter="formatterTime" width="80"/>
                    <el-table-column prop="description" label="备注" align="center"/>
                    <el-table-column prop="source_id" label="来源ID" align="center"/>
                    <el-table-column label="操作" align="center" fixed="right" width="200">
                        <template #default="scope">
                            <el-button type="danger"
                                       v-if="scope.row.audit_status === 0 && scope.row.allow_review === 1"
                                       @click="handleOperate(scope.$index, scope.row, 'audit')"
                            >审核</el-button>
                            <el-button type="primary"
                            v-if="scope.row.audit_status === 0"
                            @click="handleOperate(scope.$index, scope.row, 'records')">资产明细</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination">
                    <el-pagination
                        :current-page="pageable.pageNum"
                        :page-size="pageable.pageSize"
                        :page-sizes="[10, 25, 50, 100]"
                        :background="true"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageable.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <DialogForm @cancel="cancel" @closeDialog="closeDialog" @submitForm="submit"
                    :dialogFormVisible="dialogVisible" :dialogForm="dialogForm" :btnLoading="btnLoading"
                    :dialogTitle="dialogTitle" :btnType="btnType" :auditHistory="auditHistory"/>
        <RecordForm @cancel="cancel" @closeDialog="closeDialog" :recordHistory="recordHistory" :recordAssets="recordAssets"
            :dialogFormVisible="recordVisible" :dialogForm="dialogForm" :btnLoading="btnLoading" :dialogTitle="dialogTitle" />
    </div>
</template>

<script setup>
import {ref, onMounted, reactive, computed} from "vue";
import {formatterTime, timestamp, pickerDefaultTime} from "@/utils/utils";
import { reviewWalletSendOrderApi, reviewWalletSendAuditApi, reviewHistoryApi, reviewWalletMarginRecordsApi } from "@/api/ExAssistant/review";
import {GlobalStore} from "@/store";
import DialogForm from "./components/auditForm.vue";
import RecordForm from "./components/recordForm.vue";
const globalStore = GlobalStore();
const loading = ref(false);
const dialogVisible = ref(false);
const dialogTitle = ref("");
const btnLoading = ref(false);
const btnType = ref("");
const coinsList = computed(() => globalStore.coins);
const tradesList = computed(() => globalStore.trades);
const tableData = ref([]);
const auditStatus = ref([]);
const auditHistory = ref([]);
const recordHistory = ref([]);
const recordAssets = ref({});
const recordVisible = ref(false);

const formData = {
    timeData: [],
    bill_no: "",
    coin_id: "",
    token_name: "",
    coin_name: "",
    merchant_id: "",
    merchant_name: '',
    trade_type: "",
    audit_status: ""
};
const form = reactive({...formData});

const dialogFormData = {
    audit_order_id: "",
    bill_no: "",
    review_status: "",
    review_reason: "",
    txid: ""
};
const dialogForm = reactive({...dialogFormData});

const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
});

// 参数
const param = () => {
    return {
        page: pageable.pageNum,
        pagesize: pageable.pageSize,
        bill_no: form.bill_no,
        coin_name: form.coin_name,
        merchant_id: form.merchant_id,
        merchant_name: form.merchant_name,
        trade_type: form.trade_type,
        audit_status: form.audit_status,
        start: form.timeData[0] ? timestamp(form.timeData[0].valueOf()) : "",
        end: form.timeData[1] ? timestamp(form.timeData[1].valueOf()) : "",
    };
};

// 获取表格数据
const getTbaleData = async () => {
    loading.value = true;

    try {
        const res = await reviewWalletSendOrderApi(param());
        loading.value = false;
        tableData.value = res.data.results;
        pageable.total = res.data.count;
        auditStatus.value = res.data.extra.audit_status;
    } catch (error) {
        loading.value = false;
    }
};
// 行操作
const handleOperate = async (index, row, type) => {
    // 编辑
    if (type === "audit") {
        btnType.value = "audit";
        dialogTitle.value = "提币审核";
        Object.assign(dialogForm, {
            //...row
            audit_order_id: row.audit_order_id,
            bill_no: row.bill_no,
            review_status: "",
        });
        dialogVisible.value = true;
        const his = await reviewHistoryApi({order_id: row.audit_order_id});
        auditHistory.value = his.data.results;
    } else if (type === "view") {
        btnType.value = "view";
        dialogTitle.value = "查看审核记录";
        dialogVisible.value = true;
        const his = await reviewHistoryApi({order_id: row.audit_order_id});
        auditHistory.value = his.data.results;
    } else if (type === "records") {
        dialogTitle.value = "资产变动明细";
        recordVisible.value = true;
        const his = await reviewWalletMarginRecordsApi({audit_id: row.audit_order_id});
        recordHistory.value = his.data.results;
        recordAssets.value = his.data.extra;
    }

};
// 提交
const submit = async param => {
    try {
        btnLoading.value = true;
        let res;
        res = await reviewWalletSendAuditApi(param);
        ElMessage({
            message: res.message,
            type: "success"
        });
        dialogVisible.value = false;
        btnLoading.value = false;
        getTbaleData();
    } catch (error) {
        btnLoading.value = false;
        dialogVisible.value = false;
    }
};
//关闭弹窗
const closeDialog = () => {
    dialogVisible.value = false;
    recordVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, {...dialogFormData});
};
// 取消
const cancel = () => {
    dialogVisible.value = false;
    recordVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, {...dialogFormData});
};
// 查询
const onQuery = async () => {
    getTbaleData();
};
// 条数
const handleSizeChange = (number) => {
    pageable.pageSize = number;
    getTbaleData();
};
// 页码
const handleCurrentChange = (number) => {
    pageable.pageNum = number;
    getTbaleData();
};
onMounted(() => {
    getTbaleData();
});
</script>
